<template>
  <div id="app">
      <el-card shadow="always">

        <el-table
            :data="userList"
            style="width: 100%">
          <el-table-column
              label="姓名"
              prop="name"
              align="center">
          </el-table-column>
          <el-table-column
              label="年龄"
              prop="age"
              align="center">
          </el-table-column>
          <el-table-column
              label="性别"
              prop="sex"
              align="center">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
  </div>
</template>
<script>
import userApi from "@/api/user"

export default {
  data() {
    return {
      userList: []
    }
  },
  created: function () {
    this.findUsers()
  },
  methods: {
    //1.查询所有用户
    async findUsers(){
      const {data:res} = await userApi.findAll()
      this.userList =res.data.users;
    }
  }
}

</script>
<style>
.el-card {
  width: 90%;
  margin: auto;
}
#app{display: flex;
  justify-content: center;
}
.el-pagination{
  text-align: right;
  margin-top: 15px;
}
</style>
